<template>
  <basic-container v-loading="saveLoading">
    <div style="width:100%;min-height: 50px;padding-left:5px;display: inline-block;">
      <el-container>
        <el-container>
          <el-aside width="100px">
            <el-button type="primary" @click="updateRealityLine" style="float: left;">保存</el-button>
          </el-aside>
        </el-container>
      </el-container>
    </div>
    <template>
      <div style="background:#fff;height: 50px;line-height: 50px;margin-bottom: 10px">
        <div class="pull-auto"  style="text-align: left;font-size: 16px;color:#3478f5;margin-right:10px">
          <div class="block">
            车间：{{workshopName}} <i class="el-breadcrumb__separator el-icon-arrow-right"></i>产线模型名称：{{realityLineName}}<i class="el-breadcrumb__separator el-icon-arrow-right"></i>产线模板： {{lineTplName}}<i class="el-breadcrumb__separator el-icon-arrow-right"></i>
            产线类型：{{lineType}}
          </div>
        </div>
      </div>
      <div class="form-designer">
        <el-container style="border: #e0e0e0 solid 1px;border-top:none">
          <el-main class="demo" >
            <avue-flow :height="800"
                       width="100%"
                       ref="flow"
                       :option="option"
                       v-model="flowForm">
              <template #header="{node}" >
                <el-tooltip class="item" effect="dark" :content="`工位(`+(node || {}).name+`)`" placement="top-start">
                    <span style="width:145px;white-space: nowrap;overflow: hidden;display: inline-block;vertical-align: bottom;text-overflow: ellipsis;">
                        工位({{(node || {}).name}})
                    </span>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="删除工序" placement="top-start">
                  <i class="el-icon-delete"  style="cursor: pointer;float: right;line-height: 30px;margin-right: 2px" @click="deleteNode(node)"></i>
                </el-tooltip>
              </template>
              <template slot-scope="{node}">
                <el-collapse :ref="node.id+`Ref`"  v-model="showActive[node.id]" :style="{width:'100%',zIndex:zIndexStyle}"  @mouseover.native="handleMouseEnter(node.id)"  @mouseout.native="handleMouseLeave(node.id)">
                  <el-collapse-item title="工序信息" name="1">
                    <el-descriptions  class="margin-top"  style="width: 100%;" title="" :column="1" size="small" border >
                      <el-descriptions-item  label="工序" :labelStyle="{'width': '50px'}"
                                             v-model="`process_`+node.id"
                                             v-for="(item, index) in workPositionProcessItem[node.id]">
                        <span style="float: left;margin-top: 7px">{{item.processName}}</span>
                        <el-tooltip class="item" effect="dark" content="设备人员信息" placement="top-start">
                          <el-button type="text"  @click="devicePersonInfo(node,item,index)" style="float: right;font-size: 16px"><i class="el-icon-tickets"></i></el-button>
                        </el-tooltip>
                      </el-descriptions-item>
                    </el-descriptions>
                  </el-collapse-item>
                </el-collapse>
              </template>
            </avue-flow>

          </el-main>
        </el-container>
      </div>
    </template>


    <!--设备人员信息弹窗页面-->
    <el-dialog title=""
               :visible.sync="deviceDialogVisible"
               width="50%"
               height="600"
               lock-scroll
               v-dialogDrag
               append-to-body
               :close-on-click-modal="false"
               v-if="deviceDialogVisible"
               :fullscreen="deviceDialogFull">
      <el-backtop target=".el-card__body .el-dialog__wrapper .el-dialog" :right="15" :bottom="20" :visibility-height="1" />
      <el-backtop :bottom="60"></el-backtop>
      <template slot="title">
        <div class="avue-crud__dialog__header">
          <span class="el-dialog__title">
              <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
              设备人员信息
          </span>
          <div class="avue-crud__dialog__menu" style="cursor: pointer;margin-top: -2px;margin-right: 10px;" @click="deviceDialogFull? deviceDialogFull=false: deviceDialogFull=true">
            <i class="el-icon-full-screen"></i>
          </div>
        </div>
      </template>
      <!--工序菜单-->
      <div style="height:30vh;width: 90%;margin-left: auto;margin-right: auto">
        <div style="width: 20vh;float: left;margin-left: 20px">
          <el-steps :space="120" direction="vertical" status="process">
            <el-step :title="workPositionName">
              <template slot="icon">
                工位
              </template>
            </el-step>
            <el-step :title="processInfo.workshopSection">
              <template slot="icon">
                工段
              </template>
            </el-step>
            <el-step :title="processInfo.processName">
              <template slot="icon">
                工序
              </template>
            </el-step>
          </el-steps>
        </div>
        <div style="width: 50vh;height:30vh;display: inline-block;margin-top: 10px;margin-bottom: 10px;float: right">
          <el-descriptions class="margin-top" title="设备人员添加" style="" :labelStyle="{width: '50px',fontSize: '14px',color: '#606266'}" :contentStyle="{width: '150px'}" :column="1" size="medium" border >
            <template slot="title">
              <el-button type="primary" size="small" @click="addDevicePersonInfo">添加</el-button>
            </template>
            <el-descriptions-item label="设备">
              <el-select v-model="info.deviceSn" placeholder="请选择设备"  filterable clearable :filter-method="deviceFilterMethod">
                <el-option
                  style="margin-bottom:15px"
                  v-for="item in deviceList"
                  @click.native="chooseDevice(item)"
                  v-show=" !deviceSnVal || sourceDeviceList.includes(item.deviceSn)"
                  :label="item.deviceName"
                  :value="item.deviceSn"
                  :key="item.deviceSn">
                  <span style="float: left;">{{ item.deviceName }}</span>
                  <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceSn }}</span>
                  <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceStatusLabel }}</span>
                  <span style="float: right; color: #5e80a6; font-size: 13px">{{ item.position }}</span>
                </el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="工具">
              <el-select v-model="info.toolSn" placeholder="请选择工具" @change="chooseTool" multiple  filterable clearable  :filter-method="toolFilterMethod">
                <el-option
                  style="margin-bottom:15px"
                  v-for="item in toolList"
                  v-show=" !toolSnVal || sourceToolList.includes(item.deviceSn)"
                  :label="item.deviceName"
                  :value="item.deviceSn"
                  :key="item.deviceSn">
                  <span style="float: left;">{{ item.deviceName }}</span>
                  <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceSn }}</span>
                  <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceStatusLabel }}</span>
                  <span style="float: right; color: #5e80a6; font-size: 13px">{{ item.position }}</span>
                </el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="夹具">
              <el-select v-model="info.clampSn" placeholder="请选择夹具" @change="chooseClamp" multiple  filterable clearable  :filter-method="clampFilterMethod">
                <el-option
                  style="margin-bottom:15px"
                  v-for="item in clampList"
                  v-show=" !clampSnVal || sourceClampList.includes(item.deviceSn)"
                  :label="item.deviceName"
                  :value="item.deviceSn"
                  :key="item.deviceSn">
                  <span style="float: left;">{{ item.deviceName }}</span>
                  <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceSn }}</span>
                  <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceStatusLabel }}</span>
                  <span style="float: right; color: #5e80a6; font-size: 13px">{{ item.position }}</span>
                </el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="员工">
              <el-select v-model="info.personName" placeholder="请选择人员"  filterable clearable>
                <el-option
                  v-for="item in personCredentialList"
                  @click.native="choosePerson(item)"
                  :label="item.jobNo"
                  :value="item.jobNo">
                </el-option>
              </el-select>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div class="el-dialog-height">
        <el-table :data="infoList"  border height="250" style="width: 100%; float: left;display: inline-block">
          <el-table-column prop="deviceName" label="设备" show-overflow-tooltip align="center" >
            <template slot-scope="scope">
              <el-select v-model="scope.row.deviceSn" placeholder="请选择设备"  v-if="scope.row.edit"  filterable clearable :filter-method="deviceFilterMethod">
                <el-option
                  style="margin-bottom:15px"
                  v-for="item in deviceList"
                  v-show=" !deviceSnVal || sourceDeviceList.includes(item.deviceSn)"
                  @click.native="chooseRowDevice(item, scope.row)"
                  :label="item.deviceName"
                  :value="item.deviceSn"
                  :key="item.deviceSn">
                  <span style="float: left;">{{ item.deviceName }}</span>
                  <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceSn }}</span>
                  <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceStatusLabel }}</span>
                  <span style="float: right; color: #5e80a6; font-size: 13px">{{ item.position }}</span>
                </el-option>
              </el-select>
              <span v-else>{{ scope.row.deviceName }}{{ scope.row.deviceSn }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="toolName"   label="工具" show-overflow-tooltip align="center" >
            <template slot-scope="scope">
              <el-select v-model="scope.row.toolSn" placeholder="请选择工具" @change="chooseRowTool(scope.row)" multiple  v-if="scope.row.edit"  filterable clearable :filter-method="toolFilterMethod">
                <el-option
                  style="margin-bottom:15px"
                  v-for="item in toolList"
                  v-show=" !toolSnVal || sourceToolList.includes(item.deviceSn)"
                  :label="item.deviceName"
                  :value="item.deviceSn"
                  :key="item.deviceSn">
                  <span style="float: left;">{{ item.deviceName }}</span>
                  <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceSn }}</span>
                  <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceStatusLabel }}</span>
                  <span style="float: right; color: #5e80a6; font-size: 13px">{{ item.position }}</span>
                </el-option>
              </el-select>
              <span v-else>{{ scope.row.toolName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="clampName"  label="夹具" show-overflow-tooltip align="center" >
            <template slot-scope="scope">
              <el-select v-model="scope.row.clampSn" placeholder="请选择夹具" @change="chooseRowClamp(scope.row)" multiple  v-if="scope.row.edit"  filterable clearable :filter-method="clampFilterMethod">
                <el-option
                  style="margin-bottom:15px"
                  v-for="item in clampList"
                  v-show=" !clampSnVal || sourceClampList.includes(item.deviceSn)"
                  :label="item.deviceName"
                  :value="item.deviceSn"
                  :key="item.deviceSn">
                  <span style="float: left;">{{ item.deviceName }}</span>
                  <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceSn }}</span>
                  <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceStatusLabel }}</span>
                  <span style="float: right; color: #5e80a6; font-size: 13px">{{ item.position }}</span>
                </el-option>
              </el-select>
              <span v-else>{{ scope.row.clampName }}</span>
            </template>

          </el-table-column>
          <el-table-column prop="personName" label="员工" show-overflow-tooltip align="center" >
            <template slot-scope="scope">
              <el-select v-model="scope.row.personName" placeholder="请选择人员"  v-if="scope.row.edit"  filterable clearable>
                <el-option
                  v-for="item in personCredentialList"
                  :label="item.jobNo"
                  :value="item.jobNo">
                </el-option>
              </el-select>
              <span v-else>{{ scope.row.personName }}</span>
            </template>

          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.edit">
                <el-button type="text" size="small" @click="saveRow(scope.$index, scope.row)">保存</el-button>
                <el-button type="text" size="small" @click="cancelEdit(scope.$index, scope.row)">取消</el-button>
              </div>
              <div v-else>
                <el-button type="text" size="small" @click="editRow(scope.$index, scope.row)">编辑</el-button>
                <el-button type="text" @click="delDevicePersonInfo(scope.row, scope.$index)" size="small"><i class="el-icon-delete"></i>删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

  </basic-container>
</template>

<script>
import { getObj} from '@/api/pfoc/factorysettings' //获取当前工厂信息
import { getDevice} from '@/api/hengdong/pfocinterface'//获取设备相关
import { updateModelingLine,getLineModelingInfo } from '@/api/pfoc/realityproducelinemodeling' //产线建模修改与获取产线建模信息
import { getPersonCredentialList } from '@/api/workorder/personcredentialmanage' //获取所有人员数据


/**引入设备下拉框*/
import deviceSelect from '@/views/pfoc/realityproductline/custom-select'

export default {
  name: "edit-line-modeling",
  components: {
    //设备下拉框
    deviceSelect,
  },
  props:{
    lineId:{//产线ID
      type:String
    },
  },
  data() {
    return {
      formCollapse: [],
      count: 0,
      nodeCount:0,//节点下标
      form: [],//提交时数据集合
      flowForm:'',
      option: {
        name: null,
        nodeList: [],//工位节点集合
        lineList: [],//工位各节点指向顺序集合
      },
      processInfo:{//工位信息
        workshopSection:null,//工段
        processName:null,//工位名称
        processId:null,//工位ID
      },
      info:{
        deviceSn:null,//设备SN
        toolSn:null,//工具SN
        clampSn:null,//夹具SN
        personName:null,//员工
        deviceName:null,//设备SN
        toolName:null,//工具SN
        clampName:null,//夹具SN
      },
      index:null,//用于标记打开的是第几个
      infoList:[],//存储设备人员信息
      workPositionProcessItem: {},//存储工位对应工位的二位数组
      personCredentialList:[],//人员资质数据集
      showActive:[],//属性展示model集合
      logList:[],//操作日志集合
      realityLineName:null,//产线名称
      deviceList:[],//设备集合
      deviceSnVal:'',//设备搜索项
      sourceDeviceList:[],//源设备集合
      clampList:[],//夹具集合
      clampSnVal:'',//夹具搜索项
      sourceClampList:[],//源夹具集合
      toolSnVal:'',//工具搜索项
      toolList:[],//工具集合
      sourceToolList:[],//源工具集合
      deviceClassList:[],//设备分类集合
      organizationId:null,//组织ID
      organizationName:null,//组织名称
      saveLoading:false,//保存时遮罩开关
      lineModelingDetailsDelIds:[],//存储需要删除的节点工位ID（即已有工位删除ID）
      zIndexStyle:"",
      mainData:{},//真实产线主数据
      subData:[],//真实产线详情数据
      lineTplId:null,//产线模板ID
      lineTplName:null,//产线模板名称
      workshopList:[],//车间数据集合
      workshopId:null,//车间ID
      workshopName:null,//车间名称
      lineType:null,//产线类型（手动线、自动线）
      deviceDialogVisible:false,//设备添加弹窗开关
      deviceDialogFull:false,//设备添加弹窗放大缩小
      workPositionName:null,//工位名称(用于工位添加)
      workPositionId:null,//工位ID(用于工位添加)
      nodeId:null,//工位节点ID(用于工位添加)
      lineTypeList:[//产线类型列表
        {
          value: '手动线',
          label: '手动线'
        }, {
          value: '自动线',
          label: '自动线'
        }
      ],
      originalRows: {}, // 用于存储原始数据的备份
    };
  },

  created() {
    //获取当前工厂信息
    this.getFactoryInfo();
    //获取所有人员数据
    this.getPersonCredentialListData();
  },
  computed: {
    nodeList () {
      return this.option.nodeList
    }

  },
  mounted() {
    this.nodeCount = this.option.nodeList.length;//初始化节点下标
  },
  methods: {
    getLineModelingInfos(){
      this.formCollapse = []
      if(!this.validatenull(this.lineId)) {
        this.saveLoading = true
        getLineModelingInfo(this.lineId).then(response => {
          this.$refs.flow.resetPlumb();
          var data =response.data.data;
          //主表数据
          this.mainData= data.realityProduceLineModeling;//主数据
          //子表数据
          this.subData = data.realityProduceLineModelingDetailsList;//子表数据
          //产线名模型称
          this.realityLineName =this.mainData.realityLineName;
          //产线模板ID
          this.lineTplId =this.mainData.lineTplId;
          //产线模板名称
          this.lineTplName = this.mainData.lineTplName;
          //车间ID
          this.workshopId = this.mainData.workshopId;
          //车间名称
          this.workshopName = this.mainData.workshopName;
          //产线类型
          this.lineType = this.mainData.lineType;
          //设置反显工位
          this.option.nodeList = JSON.parse(this.mainData.processNodes);
          //设置反显工位指向顺序
          this.option.lineList =  JSON.parse(this.mainData.processNodeLine);
          //初始化节点下标
          var n =  this.option.nodeList[ this.option.nodeList.length-1].id;
          this.nodeCount = parseInt(n.split("node")[1])+1;

          //从子表数据中根据nodeId字段将对应的workPositionProcessItem填入到页面的workPositionProcessItem二位数组中
          for(var i=0;i<this.subData.length;i++){
            var nodeId = this.subData[i].nodeId;
            var item =JSON.parse(this.subData[i].workPositionProcessItem);
            this.$set(this.workPositionProcessItem,nodeId, item);//添加工位集合
          }
          //重新初始化flow组件
          this.$refs.flow.init();
          this.saveLoading = false
        }).catch(() => {
          this.saveLoading = false
        })
      }
    },
    /**获取工厂信息*/
    getFactoryInfo() {
      const factoryId=1;
      getObj(factoryId).then(response => {
        this.organizationId = response.data.data.menuId;//组织ID
        this.organizationName = response.data.data.organizationName;//组织名称
        //获取工厂设备集合
        this.getFactoryDeviceList();
      })
    },
    /**获取工厂设备集合*/
    getFactoryDeviceList(){
      var obj={
        position:this.organizationName,//设置组织查询条件
      }
      getDevice(obj).then(response => {
        this.deviceList = response.data.data;//设备集合
        for(var i =0; i<this.deviceList.length;i++){
          if(this.deviceList[i].deviceClass==='20'){//组织下工具夹具筛选
            this.clampList.push(this.deviceList[i]);//夹具集合
            this.toolList.push(this.deviceList[i]);//工具集合
          }
        }
      } )
    },
    //获取所有人员数据
    getPersonCredentialListData(){
      getPersonCredentialList().then(response => {
        this.personCredentialList = response.data.data;
      })
    },
    /**删除工位*/
    deleteNode(node){
      var t = this;
      const id = node.id;
      this.$confirm("确定要删除工位" + node.name + "?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        closeOnClickModal: !1
      }).then((function() {
        t.$refs.flow.deleteNode(id);
        //新增数据删除
        if(t.siftProcess(id)) {//判断当前工位是新增还是修改
          var  deleteId = null
          //修改数据删除
          for (var n=0;n< t.subData.length;n++){
            if(t.subData[n].nodeId === id){
              deleteId = t.subData[n].id
            }
          }
          if(!t.validatenull(deleteId)){
            t.lineModelingDetailsDelIds.push(deleteId)
          }
        }
        t.$delete(t.workPositionProcessItem, id);

      })).catch((function() {}));

    },
    /**区分新增工位、修改工位*/
    siftProcess(nodeId){
      var flg = false;//默认新增为false，修改为true
      //循环已添加的工位集合根据节点ID区分新增和修改工位
      for (var n=0;n< this.subData.length;n++){
        if(this.subData[n].nodeId === nodeId){
          flg=true;
        }
      }
      return flg;
    },

    /**保存修改产线*/
    updateRealityLine(){
      if (this.validatenull(this.option.nodeList)) {
        this.$message.warning("工位不能为空。")
        return;
      }
      if(this.validatenull(this.lineType)){
        this.$message.warning("请选择产线类型。")
        return;
      }
      //组装需要提交的数据-实际产线主表数据组装
      var params = {};//主表参数集合
      params.id = this.lineId;//产线ID
      params.realityLineName = this.realityLineName;//产线名称
      params.lineTplId = this.lineTplId;//模板ID
      params.lineTplName = this.lineTplName;//模板名称
      params.lineType = this.lineType;//产线类型（手动线、自动线）
      params.workshopId = this.workshopId;//车间ID
      params.workshopName = this.workshopName;//车间名称
      params.processNodes = JSON.stringify(this.option.nodeList);//工位节点集合（其中mark字段为工位ID）
      params.processNodeLine = JSON.stringify(this.option.lineList);//工位各节点指向顺序集合

      //组装需要提交的数据-实际产线子表数据组装
      var addObj = [];//需要新增的工位集合
      var editObj = [];//需要修改的工位集合
      //循环工位节点集合
      for (var i = 0; i < this.option.nodeList.length; i++) {
        var obj = new Object();//创建对象
        var nodeId = this.option.nodeList[i].id;
        var nodeObj = this.option.nodeList[i];

        obj['workPositionId'] = nodeObj.mark;//取出工位ID加入对象
        obj['workPositionName'] = nodeObj.name;//取出工位名称加入对象
        obj['nodeId'] = nodeObj.id;
        obj['lineId'] = this.lineId;//产线id

        var workPositionProcessItem = this.workPositionProcessItem[nodeId];
        if(this.validatenull(workPositionProcessItem)){
          this.$message.warning("请为工位【"+nodeObj.name+"】配置工序。");
          return;
        }
        obj['workPositionProcessItem'] = JSON.stringify(workPositionProcessItem);//取出工位配置的工序集合加入对象
        var processNameStr="";//工序名字符串
        var processIdStr="";//工序ID字符串
        for (let j = 0; j < workPositionProcessItem.length; j++) {
          processNameStr = processNameStr + workPositionProcessItem[j].processName + ",";
          processIdStr = processIdStr + workPositionProcessItem[j].id + ",";
        }
        obj['processNameStr'] = processNameStr.substring(0,processNameStr.length-1);
        obj['processIdStr'] = processIdStr.substring(0,processIdStr.length-1);

        //最后加入提交数据数组
        if (!this.siftProcess(nodeObj.id)) {//判断当前工位是新增还是修改
          addObj.push(obj);
        } else {//加入提交修改数据数组
          for (var n = 0; n < this.subData.length; n++) {
            if (this.subData[n].nodeId === nodeObj.id) {
              obj['id'] = this.subData[n].id
            }
          }
          editObj.push(obj);
        }
      }
      var data = {
        realityProduceLineModeling: params,
        addLineModelingDetailsList: addObj,//编辑时新增工位配置集合
        editLineModelingDetailsList: editObj,//编辑时修改工位配置集合
        lineModelingDetailsDelIds: this.lineModelingDetailsDelIds//编辑时产线配置详情需要删除的ID集合
      }
      this.saveLoading = true;
      //提交
      updateModelingLine(data).then(response => {
        this.$message.success("修改成功。")
        //获取修改后的产线详情数据
        this.subData = response.data.data;
        this.$emit('closeEdit');//关闭修改页面
        this.saveLoading = false
      }).catch(() => {
        this.saveLoading = false
      });

    },
    //设备人员信息
    devicePersonInfo(node,processInfo,index){
      this.workPositionName=node.name;//工位名称(用于工序添加)
      this.workPositionId=node.mark;//工位ID(用于工序添加)
      this.nodeId=node.id;//工位节点ID(用于工序添加)
      this.processInfo.processName = processInfo.processName;//工序名称
      this.processInfo.processId = processInfo.id;//工序ID
      this.processInfo.workshopSection = processInfo.workshopSection;//工位所属工段
      this.index = index;
      this.infoList = this.workPositionProcessItem[node.id][index].info;
      this.originalRows = {};
      this.info={
        deviceSn:null,//设备SN
        toolSn:null,//工具SN
        clampSn:null,//夹具SN
        personName:null,//员工
        deviceName:null,//设备SN
        toolName:null,//工具SN
        clampName:null,//夹具SN
      }
      this.deviceDialogVisible=true;
    },
    //设备选择
    chooseDevice(item){
      this.info.deviceSn = item.deviceSn;
      this.info.deviceName = item.deviceName;
    },
    //工具选择
    chooseTool(val){
      /*this.info.toolSn = item.deviceSn;
      this.info.toolName = item.deviceName;*/
      let toolName = ''
      for (let i in val) {
        this.toolList.find((item) => {
          if (item.deviceSn === val[i]) {
            toolName=toolName+item.deviceName+'【'+item.deviceSn+'】/'
          }
        })
      }
      //去掉最后一个'/'
      if(toolName.length>0){
        toolName = toolName.substring(0,toolName.length-1)
      }
      this.info.toolName = toolName;
    },
    //夹具选择
    chooseClamp(val){
      /*this.info.clampSn = item.deviceSn;
      this.info.clampName = item.deviceName;*/
      let clampName = ''
      for (let i in val) {
        this.toolList.find((item) => {
          if (item.deviceSn === val[i]) {
            clampName=clampName+item.deviceName+'【'+item.deviceSn+'】/'
          }
        })
      }
      //去掉最后一个'/'
      if(clampName.length>0){
        clampName = clampName.substring(0,clampName.length-1)
      }
      this.info.clampName = clampName;
    },
    //人员选择
    choosePerson(item){
      this.info.personName = item.jobNo;
    },
    //确认添加
    addDevicePersonInfo(){
      if(this.validatenull(this.info.deviceSn)&&this.validatenull(this.info.toolSn)&&this.validatenull(this.info.clampSn)&&this.validatenull(this.info.personName)){
        this.$message.warning("请选择设备、工具、夹具、员工！");
        return;
      }
      const newInfo = { ...this.info };//深拷贝
      this.infoList.push(newInfo);
      const newInfoList = [...this.infoList];
      this.$set(this.workPositionProcessItem[this.nodeId][this.index],'info',newInfoList);
      this.info={
        deviceSn:null,//设备SN
        toolSn:null,//工具SN
        clampSn:null,//夹具SN
        personName:null,//员工
        deviceName:null,//设备SN
        toolName:null,//工具SN
        clampName:null,//夹具SN
      }
    },
    //人员信息删除
    delDevicePersonInfo(row,index){
      this.infoList.splice(index,1);
      const newInfoList = [...this.infoList];
      this.$set(this.workPositionProcessItem[this.nodeId][this.index],'info',newInfoList);
    },
    //鼠标移到置顶
    handleMouseEnter(nodeId) {
      //属性鼠标移到展开
      // this.$set(this.showActive, nodeId, ['1']);
      let ref = nodeId+"Ref";//获取到当前的ref
      this.$refs[ref].$parent.$refs.node.style.zIndex="999999";
      this.zIndexStyle="1";

    },
    //鼠标移开取消置顶
    handleMouseLeave(nodeId) {
      //属性鼠标移开关闭
      // this.$set(this.showActive, nodeId, []);
      let ref = nodeId+"Ref";//获取到当前的ref
      this.$refs[ref].$parent.$refs.node.style.zIndex="2";
      this.zIndexStyle="";

    },
    chooseRowDevice(item,row){
      row.deviceSn = item.deviceSn;
      row.deviceName = item.deviceName;
    },
    chooseRowTool(item,row){
     /* row.toolSn = item.deviceSn;
      row.toolName = item.deviceName;*/
      let toolName = ''
      for (let i in row.toolSn) {
        this.toolList.find((item) => {
          if (item.deviceSn === row.toolSn[i]) {
            toolName=toolName+item.deviceName+'【'+item.deviceSn+'】/'
          }
        })
      }
      //去掉最后一个'/'
      if(toolName.length>0){
        toolName = toolName.substring(0,toolName.length-1)
      }
      row.toolName = toolName;
    },
    chooseRowClamp(item,row){
     /* row.clampSn = item.deviceSn;
      row.clampName = item.deviceName;*/
      let clampName = ''
      for (let i in row.clampSn) {
        this.clampList.find((item) => {
          if (item.deviceSn === row.clampSn[i]) {
            clampName=clampName+item.deviceName+'【'+item.deviceSn+'】/'
          }
        })
      }
      //去掉最后一个'/'
      if(clampName.length>0){
        clampName = clampName.substring(0,clampName.length-1)
      }
      row.clampName = clampName;
    },
    editRow(index, row) {
      // 备份原始数据
      this.$set(this.originalRows, index, { ...row });
      // 动态添加 edit 属性
      this.$set(row, 'edit', true);
    },
    //设备人员信息修改保存
    saveRow(index, row) {
      this.infoList[index] = row;
      const newInfoList = [...this.infoList];
      this.$set(this.workPositionProcessItem[this.nodeId][this.index],'info',newInfoList);
      this.$set(row, 'edit', false);
    },
    cancelEdit(index, row) {
      // 从备份对象中恢复原始数据
      Object.assign(row, this.originalRows[index]);
      this.infoList[index] = row;
      const newInfoList = [...this.infoList];
      this.$set(this.workPositionProcessItem[this.nodeId][this.index], 'info', newInfoList);
      // 移除备份对象中的数据
      this.$delete(this.originalRows, index);
      // 取消编辑，恢复原始数据
      this.$set(row, 'edit', false);
    },
    //设备搜索
    deviceFilterMethod(query) {
      let arr = [];
      this.deviceSnVal = query;
      if (!this.validatenull(query)) {
        this.deviceList.forEach((item, i) => {
          if (item.deviceName.includes(query) || item.deviceSn.includes(query)) {
            arr.push(item.deviceSn);
          }
        })
      } else {
        this.deviceList.forEach((item, i) => {
          arr.push(item.deviceSn);
        })
      }
      this.sourceDeviceList = [...arr];
    },
    //工具搜索
    toolFilterMethod(query) {
      let arr = [];
      this.toolSnVal = query;
      if (!this.validatenull(query)) {
        this.toolList.forEach((item, i) => {
          if (item.deviceName.includes(query) || item.deviceSn.includes(query)) {
            arr.push(item.deviceSn);
          }
        })
      } else {
        this.toolList.forEach((item, i) => {
          arr.push(item.deviceSn);
        })
      }
      this.sourceToolList = [...arr];
    },
    //夹具搜索
    clampFilterMethod(query) {
      let arr = [];
      this.clampSnVal = query;
      if (!this.validatenull(query)) {
        this.clampList.forEach((item, i) => {
          if (item.deviceName.includes(query) || item.deviceSn.includes(query)) {
            arr.push(item.deviceSn);
          }
        })
      } else {
        this.clampList.forEach((item, i) => {
          arr.push(item.deviceSn);
        })
      }
      this.sourceClampList = [...arr];
    },
  }
};
</script>

<style scoped>
/deep/ .avue-flow__node {
  height: auto !important;
}

/deep/ .avue-flow__node-header {
  line-height: 30px;
}

/deep/ .el-descriptions__title {
  font-size: 14px;
  font-weight: 400;
  margin-top: 5px;
}

/deep/ .el-descriptions__header {
  width: 100% !important;
}


/deep/ .el-dialog-height {
  height: 30vh;
  width: 90%;
  margin-top: 10px;
  overflow: auto;
  /* 隐藏默认的滚动条样式 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}


/deep/ .el-step__icon.is-text {
  color: #000;
  font-size: 12px;
  padding: 10px;
  border-color: #000;
  width: 50px;
  height: 50px;
}

/deep/ .el-step__icon {
  width: 40px;
  height: 40px;
}

/deep/ .el-step.is-horizontal .el-step__line {
  top: 20px !important;
  border-color: #000;
}

/deep/ .el-step.is-vertical .el-step__line {
  left: 23px !important;
}

/deep/ .el-step.is-vertical .el-step__main {
  padding-left: 36px;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding-top: 11px;
  color: #000;
  font-size: 12px;
}

/deep/ .el-step.is-vertical .el-step__title {
  color: #000;
  font-size: 13px;
}

/deep/ .el-step__line {
  position: absolute;
  border-color: inherit;
  background-color: #242526;
}


/*以下样式是打印的时候avue表格错乱修正方式（主要是序号列和操作列固定影响的）*/
/deep/ .el-table__fixed {
  display: none !important;
}

/deep/ .el-table__fixed-right {
  display: none !important;
}

/deep/ .el-table__cell.is-hidden > * {
  visibility: visible !important;
}

/deep/ .avue-grid {
  display: none !important;
}

/deep/ .el-main {
  background: #fff !important;
}

/deep/ .el-card__body {
  padding: 0px !important;
}

/*去掉滚动条样式*/
.demo::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.demo {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
